<template>
  <div>
    <van-nav-bar title="地址信息" left-text="返回" left-arrow @click-left="onClickLeft"/>
    <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
        @change="onChange"
    />
  </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import { Toast } from "vant";
import axios from "axios";

export default {
  name: "selectServiceType",
  data() {
    return {
      areaList,
      searchResult: [],
      addressInfo: {
        address_id: '',
        id: '',
        addressName: '',
        contactName: '',
        contactPhone: '',
        detailAddress: '',
        isDefault: false
      },
      user: {}
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSave(content) {
      console.log('Content received in onSave:', content); // 调试信息
      if (!content) {
        Toast.fail('保存地址失败：内容为空');
        return;
      }

      // 使用 Vue.set 确保响应式更新
      this.$set(this, 'addressInfo', {
        address_id: '',
        id: this.user.id || '',
        addressName: content.addressDetail || '',
        contactName: content.name || '',
        contactPhone: content.tel || '',
        detailAddress: content.province+content.city+content.county || '',
        isDefault: content.isDefanlt || false
      });

      console.log('Updated addressInfo:', this.addressInfo); // 调试信息

      // 发送请求到后端
      axios.post('http://localhost:10086/api/admin/address', this.addressInfo)
          .then(response => {
            console.log(this.addressInfo);
            Toast.success('地址保存成功');
            this.$router.go(-1);
          })
          .catch(error => {
            Toast.fail('地址保存失败');
            console.error('保存地址失败:', error);
          });
    },
    onDelete() {
      Toast("delete");
      this.$router.push("/my");
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          // {
          //   name: "万达广场",
          //   address: "郑州市二七区"
          // }
        ];
      } else {
        this.searchResult = [];
      }
    },
    onChange(content) {
      // 更新 addressInfo 对象
      this.addressInfo = {
        address_id: '',
        id: this.user.id || '',
        addressName: content.addressDetail || '',
        contactName: content.name || '',
        contactPhone: content.tel || '',
        detailAddress: content.province+content.city+content.county || '',
        isDefault: content.isDefanlt || false
      };
    }
  },
  created() {
    const userStr = sessionStorage.getItem("userDB");
    if (userStr) {
      try {
        this.user = JSON.parse(userStr);
        console.log('User loaded from sessionStorage:', this.user); // 调试信息
      } catch (error) {
        console.error('Failed to parse user data:', error);
        Toast.fail('用户信息解析失败，请重新登录');
      }
    } else {
      Toast.fail('用户信息未获取到，请重新登录');
    }
  }
}
</script>

<style>
.radio1 {
  width: 100px;
  font-size: 30px;
  font-weight: 800;
  height: 40px;
  margin-top: 10px;
}
</style>
